/**
 * @author kobe
 * @date   16/07/20
 */

import PullRefresh from "../components/mui/PullRefresh.js";
import NoData from '../components/NoData.js';

var lf = liefeng,
    ajax = lf.utils.ajax;

var DeviceList = React.createClass({
    render(){
        var deviceList = this.props.data.map(function (data) {
            return(
                <Device data={data} privilegeId={data.privilegeId}/>
            )
        })
        return(
            <div className="choose-link">
                {deviceList}
            </div>
        )
    }
});

var Device = React.createClass({
    componentDidMount(){
        var me = this,
            $setDefault = React.findDOMNode(this.refs.setDefault);

        $($setDefault).on('tap',function () {
            // console.log('aaa');
            $('.mui-input-row').removeClass('active')
                               .find('.mui-switch').removeClass('mui-active');
            $(this).addClass('active').find('.mui-switch').addClass('mui-active');

            setTimeout(function () {
                ajax({
                    type: 'POST',
                    data: {
                        privilegeId: me.props.privilegeId
                    },
                    success: function (data) {
                        if(data.code == 200){
                            debugAlert(data.desc)
                        }
                    }
                }, lf.finger.api.door.setPrivilegeDefDevice)
            },200);

        })

    },
    render(){
        var data = this.props.data;
        var isDefault = data.isDefault == null || data.isDefault == 0 ? false : true;

        //选中的做成组件
        return(
            <a className={ "mui-input-row " + (isDefault ? "active" : "") }  href="javascript:;" ref="setDefault">
                <div className="device-name">
                    <p>{data.guardName}</p>
                    <p>{data.positionName}</p>
                </div>
                <div className={"mui-switch mui-switch-blue mui-switch-mini " + (isDefault ? "mui-active" : "")}>
                    <div className="mui-switch-handle"></div>
                </div>
            </a>
        )
    }
})


var Container = React.createClass({
    getInitialState(){
        return({
            deviceList: [],
            noData: false
        })
    },
    componentWillMount(){
        var me = this,
            user = me.props.user;

        ajax({
            type: 'GET',
            data: {
                householderId: user.id,
                householdType: user.householdType,
                guardType: 'GUARD'
            },
            success: function (data) {

                if(data.dataList.length > 0){
                    me.setState({
                        deviceList: data.dataList,
                        noData : false
                    })
                }else{
                    me.setState({
                        noData: true
                    })
                }
            }
        }, lf.finger.api.door.getPrivilegeDeviceList)

    },
    render(){
        console.log(this.state.noData)
        if(this.state.deviceList.length > 0) { //有数据才显示
            return(
                <div className="set-open">
                    <DeviceList data={this.state.deviceList} />
                    <p className="tips">默认位置为一键开门位置</p>
                </div>
            )
        }else if(this.state.noData){  //显示nodate
            var data = {
                span_text:'暂无授权设备'
            }
            return(
                <NoData data={data}/>
            )
        }else{  //避免已载入的时候ajax没完成时候回出现提示文字的情况
            return(
                null
            )
        }
    }
})

lf.bridgeJs.getUser(function (user) {
    // setTitle('默认位置一键开门');
    React.render(
        <PullRefresh data={<Container user={user}/>}/>,
        document.getElementById('root'), function () {
            $('#root').css({backgroundColor: '#efeff4'});
            $('.mui-scroll').css({backgroundColor: '#efeff4'});
        }
    );
});